<!DOCTYPE html>
<!--
* CoreUI - Free Bootstrap Admin Template
* @version v2.0.0
* @link https://coreui.io
* Copyright (c) 2018 creativeLabs Łukasz Holeczek
* Licensed under MIT (https://coreui.io/license)
-->

<html lang="en">
  <head>
    <base href="./">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
    <meta name="author" content="Łukasz Holeczek">
    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
    <title>登录</title>
    <!-- Icons-->
    <link href="vendors/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
    <link href="vendors/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
    <link href="vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="vendors/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
    <!-- Main styles for this application-->
    <link href="css/style.css" rel="stylesheet">
    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
    <style>
    body{
        background-image: url('./images/1.jpg');
    }
    </style>
  </head>
  <body class="app flex-row align-items-center">
      
    <div class="container">
        <form class="needs-validation" action="/api/login" method="post" novalidate>
      <div class="row justify-content-center" id="bk">
        <div class="col-md-6">
          <div class="card mx-4">
            <div class="card-body p-4">
              <h1 style="text-align: center;">登录</h1>
              
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <i class="icon-user"></i>
                  </span>
                </div>
                <input type="text" id="emp_id" name="emp_id" class="form-control" placeholder="用户名"  required>
                <!-- <input class="form-control" type="text" placeholder="用户名" pattern="^[\u4e00-\u9fa5]{2,4}$|^[A-Za-z\s]{2,40}$" required> -->
                <div class="invalid-feedback">
                    用户名不能为空并只能输入中文或英文组成！
                  </div>
              </div>
        
              <div class="input-group mb-4">
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <i class="icon-lock"></i>
                  </span>
                </div>
                <input type="password" id="emp_pwd" name="emp_pwd" class="form-control" placeholder="密码"  required>
              </div>
              <div class="form-group row">
                <div class="col-md-9 col-form-label">
                  <div class="form-check form-check-inline mr-1">
                    <input class="form-check-input" id="inline-radio1" type="radio" value=0 name="emp_type" checked >
                    <label class="form-check-label" for="inline-radio1">销售人员</label>
                  </div>
                  <div class="form-check form-check-inline mr-1">
                    <input class="form-check-input" id="inline-radio2" type="radio" value=1 name="emp_type">
                    <label class="form-check-label" for="inline-radio2">跟单人员</label>
                  </div>
                  <div class="form-check form-check-inline mr-1">
                    <input class="form-check-input" id="inline-radio3" type="radio" value=2 name="emp_type">
                    <label class="form-check-label" for="inline-radio3">财务人员</label>
                  </div>
                </div>
              </div>

              <button class="btn btn-block btn-success"type="button" onclick="login()">登录</button>
            </div>
          
          </div>
        </div>
      </div>
      </form>
      <div class="modal fade show" id="FailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
           style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-danger" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">通知</h4>
              <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
            </div>
            <div class="modal-body">
              <p id="msg">登录失败</p>
            </div>
            <div class="modal-footer">
              <button class="btn btn-secondary" type="button" data-dismiss="modal">关闭</button>

            </div>
          </div>
          <!-- /.modal-content-->
        </div>
        <!-- /.modal-dialog-->
      </div>

      <div class="modal fade" id="issue" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
           style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-danger" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">提示</h4>
              <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
            </div>
            <div class="modal-body">
              <p>出现未知错误</p>
            </div>
            <div class="modal-footer">
              <button class="btn btn-danger" type="button" data-dismiss="modal">确定</button>
            </div>
          </div>
          <!-- /.modal-content-->
        </div>
      </div>
    </div>
    <!-- CoreUI and necessary plugins-->
    <script src="vendors/jquery/js/jquery.min.js"></script>
    <script src="vendors/popper.js/js/popper.min.js"></script>
    <script src="vendors/bootstrap/js/bootstrap.min.js"></script>
    <script src="vendors/pace-progress/js/pace.min.js"></script>
    <script src="vendors/perfect-scrollbar/js/perfect-scrollbar.min.js"></script>
    <script src="vendors/@coreui/coreui/js/coreui.min.js"></script>

    <script>
        function login() {

          var forms = document.getElementsByClassName('needs-validation')[0];
              //forms.classList.remove('was-validated');
              if (forms.checkValidity() === true) {
                var params = $(".needs-validation").serialize();
                console.log(params)
                $.ajax({
                  type: 'POST',//方法类型
                  url: "/api/emp/login",
                  data: params,
                  success: function (result) {
                    if (result.resultCode == 200) {
                      if(result.data === 0){
                        window.location.href = '/salesman/salesman_add_user';
                      }else if(result.data === 1){
                        window.location.href = '/merchandiser/merchandiser_orders_list';
                      }else if(result.data === 2){
                        window.location.href = '/account/account_orders_check';
                      }
                    } else {
                      $("#msg").html("编辑失败,原因是："+result.message);
                      $('#FailModal').modal('show');
                    }
                    ;
                  },
                  error: function () {
                    $('#issue').modal('show');
                  }
                });
              }
              forms.classList.add('was-validated');
          }
          </script>
  </body>
</html>